<template lang="pug">
#container1
</template>

<script lang="ts" setup>
import {Chart} from '@antv/g2'
import {inject, onMounted, ref} from 'vue'
import {AxiosInstance} from 'axios'
import data from './nine'

const chart = ref<Chart>()

function findMaxMin(data: any) {
  let maxValue = 0;
  let minValue = 50000;
  let maxObj = null;
  let minObj = null;
  for (const d of data) {
    if (d.Close > maxValue) {
      maxValue = d.Close;
      maxObj = d;
    }
    if (d.Close < minValue) {
      minValue = d.Close;
      minObj = d;
    }
  }
  return {max: maxObj, min: minObj};
}

const http = inject('axios') as AxiosInstance
onMounted(() => {
  chart.value = new Chart({
    container: 'container1',
    autoFit: true,
  })

  chart.value?.data(data)
  chart.value?.scale({
    Date: {
      tickCount: 10
    },
    Close: {
      nice: true,
    }
  });
  chart.value?.axis('Date', {
    label: {
      formatter: text => {
        const dataStrings = text.split('.');
        return dataStrings[2] + '-' + dataStrings[1] + '-' + dataStrings[0];
      }
    }
  });

  chart.value?.line().position('Date*Close');
  // annotation
  const {min, max} = findMaxMin(data);
  chart.value?.annotation().dataMarker({
    top: true,
    position: [max.Date, max.Close],
    text: {
      content: '全部峰值：' + max.Close,
    },
    line: {
      length: 30,
    }
  });
  chart.value?.annotation().dataMarker({
    top: true,
    position: [min.Date, min.Close],
    text: {
      content: '全部谷值：' + min.Close,
    },
    line: {
      length: 50,
    }
  });
  chart.value?.render();

})


</script>

<!--suppress JSUnusedGlobalSymbols -->
<script lang="ts">
export default {
  name: 'PolygonalChart'
}
</script>

<style lang="scss" scoped>
#container1 {
  width: 100%;
  height: 150px;
}
</style>
